@import '@influxdata/clockface/dist/variables.scss';

.data-source {
  background-color: $g2-kevlar;
  padding: $cf-marg-c;
  border-radius: $cf-radius;
}

.data-source--block {
  flex: 1 0 350px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 320px;
  height: 180px;
}

.data-source--block-title {
  font-size: 14px;
  user-select: none;
  font-weight: $cf-font-weight--medium;
  padding-bottom: $cf-marg-b;
  margin-bottom: $cf-marg-b;
  color: $g13-mist;
  border-bottom: $cf-border solid $g3-castle;
}

.data-source--list,
.data-source--list__empty {
  flex: 1 0 0;
}

.data-source--list__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  color: $g8-storm;
}

.data-source--list-item {
  user-select: none;
  font-size: 13px;
  padding: $cf-marg-a $cf-marg-b;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: $cf-font-weight--medium;
  transition: color 0.25s ease, background-color 0.25s ease;
  color: $g9-mountain;
  margin: $cf-border;
  border-radius: $cf-radius-sm;

  &:hover {
    cursor: pointer;
    color: $g15-platinum;
    background-color: $g3-castle;
  }
}

.data-source--list-item__selected,
.data-source--list-item__selected:hover {
  background-color: $c-pool;
  color: $g20-white;
}
